<script lang='ts' setup>
import { onMounted, ref, reactive } from 'vue';
// Echarts 为init（dom元素后的类型）
// EChartsOption 为 option 的类型
import type { ECharts, EChartsOption, } from 'echarts';
import { init } from 'echarts';
import { dataStore } from '@/stores/data'
const { homesort, } = dataStore()
onMounted(() => {
	const charEle = document.getElementById('char') as HTMLElement;
	const charEch: ECharts = init(charEle);
	window.addEventListener('resize', function () {//随视窗改变大小
		charEch.resize();
	})

	const option: EChartsOption = {
		legend: {
			show: false,
		},
		toolbox: {
			show: true,
			feature: {
				mark: { show: true },
				dataView: { show: true, readOnly: false },
				restore: { show: true },
				saveAsImage: { show: true }
			}
		},
		series: [
			{
				name: 'Nightingale Chart',
				type: 'pie',
				radius: ['10%', '80%'],
				center: ['50%', '50%'],
				roseType: 'area',
				itemStyle: {
					borderRadius: 8
				},
				data: homesort.data
			}
		]
	};
	charEch.setOption(option);
});
</script>
<template>
	<div class="ecbox">
		<div id="char"></div>
	</div>
</template>
<style lang="scss" scoped>
.ecbox {
	display: flex;
	justify-content: center;
}

#char {
	width: 600px;
	height: 600px;
}
</style>